<template>
  <div class="container">
    <nav-bar title="收货地址" />
    <div class="item" 
      v-for="(item, index) in addressList" 
      :key="index"
      @click="checkAddress(index)"
    >
      <div class="name-tel">
        <div class="name">{{item.ShipTo}}</div>
        <div class="tel">{{item.Phone}}</div>
      </div>
      <div class="address">
        <i v-if="item.IsDefault">默认</i>
        <p>
          <span>{{item.Address}}</span>
          <span>{{item.AddressDetail}}</span>
        </p>
      </div>
      <div class="set-del">
        <div class="default set" :class="{'default-on': item.IsDefault}" @click="defaultAddress(index)">
          <i></i>
          设为默认地址
        </div>
        <div class="edit" @click.stop="editAddress(index)">
          <img src='../../assets/img/edit.png' />
          编辑
        </div>
        <div class="del" @click.stop="deleteAddress(index)">
          <img src='../../assets/img/delete.png' />
          删除
        </div>
      </div>
    </div>
    <div class="add-btn" @click="newAddress">添加新的地址</div>
    <van-popup 
      position="bottom" 
      v-model="addressEdit"
    >
      <div class="address-edit">
        <div class="close" @click="hideAddressEdit">&times;</div>
        <div class="tit">{{isEdit? '修改' : '添加'}}收货地址</div>
        <div class="area">
          <div class="area-item">
            <div class="label">姓名</div>
            <input 
              type="text" 
              placeholder="请填写姓名" 
              :value="customName" 
              @input="inputName"
            >
          </div>
          <div class="area-item">
            <div class="label">手机</div>
            <input 
              type="text" 
              placeholder="请填写手机"
              :value="customTel" 
              @input="inputTel"
            >
          </div>
          <div class="area-item" @click="showArea">
            <div class="label">地区</div>
            <div class="area-select" :class="{'area-selected':addressArea!==''}">{{addressArea?addressArea:'请选择地区'}}</div>
          </div>
          <div class="area-item">
            <div class="label">地址</div>
            <input 
              type="text" 
              placeholder="请填写地址"
              :value="addressDetail"
              @input="inputAddressDetail"
            >
          </div>
        </div>
        <div v-if="!isEdit" class="default" :class="{'default-on': newAddressDefault}" @click="newDefault">
          <i></i>
          <span>设为默认收货地址</span>
        </div>
        <div class="add-btn" @click="saveAddress">保存地址</div>
      </div>
    </van-popup>

    <van-popup v-model="areaShow" position="bottom">
      <van-area 
        :area-list="areaList" 
        @confirm="areaConfirm"
        @cancel="areaCancel"
      />
    </van-popup>
  </div>
</template>

<script>
import NavBar from 'components/common/NavBar'
import area from '../../assets/js/area'
import { phoneReg } from '../../utils'
import { 
  getUserAddress, 
  newAddress, 
  editAddress, 
  defaultAddress,
  deleteAddress,
} from '../../network/address'
import { Toast } from 'vant'

export default {
  components: {
    NavBar
  },
  data() {
    return {
      userKey: localStorage.getItem('userKey'),
      isEdit: false,
      editId: '',
      addressEdit: false,
      newAddressDefault: false,
      addressArea: '',
      areaList: {},
      areaShow: false,
      customName: '',
      customTel: '',
      addressDetail: '',
      addressList: [],
    }
  },
  mounted() {
    this.areaList = area

    this.getUserAddress()
  },
  methods: {
    getUserAddress(){
      getUserAddress({
        userkey: this.userKey,
      }, res => {
        let addressList = res.ShippingAddress.CanDeliveAddressList
        this.addressList = addressList
      })
    },
    newAddress(){
      this.addressEdit = true
      this.isEdit = false
      this.areaInit()
      // 初始化 新增地址 -> saveAddress
    },
    editAddress(index){
      this.addressEdit = true
      let address = this.addressList[index]
      this.isEdit = true
      this.editId = address.Id
      this.customName = address.ShipTo
      this.customTel = address.Phone
      this.addressArea = address.Address
      this.addressDetail = address.AddressDetail
      this.newAddressDefault = address.IsDefault
    },
    deleteAddress(index){
      let requestData = {
        userkey: this.userKey,
        id: this.addressList[index].Id
      }
      deleteAddress(requestData, () => {
        this.getUserAddress()
      })
    },
    defaultAddress(index){
      let requestData = {
        userkey: this.userKey,
        addId: this.addressList[index].Id
      }
      defaultAddress(requestData, () => {
        this.getUserAddress()
      })
    },
    checkAddress(index){
      if(this.$route.query.action !== 'orderConfirm'){
        return false
      }
      let address = this.addressList[index]
      localStorage.setItem('productRequestAddress', JSON.stringify(address))
      this.$router.back()
    },
    hideAddressEdit(){
      this.addressEdit = false
    },
    newDefault(){
      this.newAddressDefault = !this.newAddressDefault
    },
    saveAddress(){
      let addressArea = this.addressArea
      let addressDetail = this.addressDetail
      let customTel = this.customTel
      let customName = this.customName

      this.validateForm()

      let requestData = {
        userkey: this.userKey,
        address: addressArea,
        addressDetail: addressDetail,
        phone: customTel,
        shipTo: customName,
        // regionId: 0,
        // longitude: 0,
        // latitude: 0,
        // shopbranchid: 0,
        isDefault: this.newAddressDefault // 待增加
      }
      if(!this.isEdit){
        newAddress(requestData, () => {
          this.getUserAddress()
        })
      } else {
        requestData.id = this.editId
        editAddress(requestData, () => {
          this.getUserAddress()
        })
      }
      
      
      this.addressEdit = false
    },
    inputName(e){
      this.customName = e.target.value
    },
    inputTel(e){
      this.customTel = e.target.value
    },
    inputAddressDetail(e){
      this.addressDetail = e.target.value
    },
    showArea(){
      this.areaShow = true
    },
    areaCancel(){
      this.areaShow = false
    },
    areaConfirm(e){
      this.addressArea = e[0].name + e[1].name + e[2].name
      this.areaShow = false
    },
    areaInit(){
      this.customName = ''
      this.customTel = ''
      this.addressArea = ''
      this.addressDetail = ''
      this.newAddressDefault = false
    },
    validateForm(){
      let addressArea = this.addressArea
      let addressDetail = this.addressDetail
      let customTel = this.customTel
      let customName = this.customName

      if(addressArea==='' || addressDetail==='' || customTel==='' || customName===''){
        Toast('输入项不能为空')
        return false
      }

      if(!phoneReg(customTel)){
        Toast('手机号格式错误')
        return false
      }
    }
  },
}
</script>

<style scoped>
.item{
  margin: 15px;
  border-radius: 5px;
  padding: 10px 20px;
  background-color: #ffffff;
}
.item .name-tel{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  font-size: 18px;
  padding-bottom: 5px;
}
.item .address{
  display: flex;
  align-items: flex-start;
  color: #999999
}
.item .address span{
  padding-right: 5px;
}
.item .address i{
  flex-shrink: 0;
  margin-right: 5px;
  margin-top: -2px;
  border-radius: 50px;
  padding: 3px 10px;
  font-size: 13px;
  color: #ffffff;
  background-color: #d50721;
}
.item .set-del{
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #e4e4e4;
  margin-top: 12px;
  padding-top: 12px;
  padding-bottom: 5px;
}
.item .set-del img{
  width: 26px;
  height: 26px;
  margin-right: 5px;
}
.item .set-del .set{
  display: flex;
  align-items: center;
  width: 45%;
}
.item .set-del .edit{
  display: flex;
  align-items: center;
}
.item .set-del .del{
  display: flex;
  align-items: center;
}
.add-btn{
  color: #ffffff;
  border-radius: 50px;
  line-height: 45px;
  background-color: #000000;
  text-align: center;
  margin: 20px 15px 0 15px;
}
.address-edit{
  position: relative;
}
.address-edit .close{
  position: absolute;
  right: 25px;
  top: 10px;
  width: 20px;
  height: 20px;
  line-height: 18px;
  font-size: 18px;
  color: #ccc;
  border-radius: 50%;
  border: 2px solid #e4e4e4;
  text-align: center;
}
.address-edit .tit{
  padding: 10px 25px 10px 25px;
  border-bottom: 1px solid #e4e4e4;
}
.address-edit .area{
  padding: 2px 25px;
}
.address-edit .area-item{
  display: flex;
  align-items: stretch;
  height: 50px;
  border-bottom: 1px solid #f0f0f0;
}
.address-edit .area-item .label{
  width: 60px;
  flex-shrink: 0;
  line-height: 50px;
}
.address-edit .area-item input{
  flex-grow: 1;
}
.address-edit .area-item .area-select{
  position: relative;
  flex-grow: 1;
  line-height: 50px;
  color: #ccc;
}
.address-edit .area-item .area-select:after{
  display: block;
  content: '';
  width: 8px;
  height: 8px;
  position: absolute;
  right: 3px;
  top: 20px;
  border-right: 2px solid #ddd;
  border-top: 2px solid #ddd;
  transform: rotate(45deg);
}
.address-edit .area-item .area-selected{
  color: #000;
}
.address-edit .default{
  display: flex;
  align-items: center;
  padding: 15px 25px;
}
.default{
  color: #999;
}
.default i{
  position: relative;
  width: 15px;
  height: 15px;
  border: 1px solid #d4d4d4;
  border-radius: 50%;
  margin-right: 6px;
}
.default-on{
  color: #000;
}
.default-on i{
  border-color: #000000;
  background-color: #000;
}
.default-on i:after{
  position: absolute;
  left: 5px;
  top: 1px;
  display: block;
  content: '';
  width: 4px;
  height: 8px;
  border-bottom: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
  transform: rotate(45deg);
}
.address-edit .add-btn{
  margin-top: 5px;
  margin-bottom: 20px;
}
</style>